<template>
    <div class="app-container">
      <!-- 基础信息 -->
      <div class="base-info" style="">
        <el-form :model="ruleForm" :inline="true" :rules="isDraft ? rules2 : rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
          <h3>基础信息</h3>
          <el-divider></el-divider>
          <el-form-item label="项目名称(中文)" prop="name">
            <el-input v-model.trim="ruleForm.name" maxlength="30" placeholder="请填写项目名称(中文)"></el-input>
          </el-form-item>
          <el-form-item label="项目名称(当地)">
            <el-input v-model.trim="ruleForm.localName" maxlength="60" placeholder="请填写项目名称(当地语言)"></el-input>
          </el-form-item>
          <el-form-item label="项目别名">
            <el-input v-model.trim="ruleForm.anotherName" maxlength="100" placeholder="多个别名之间可用;号分割"></el-input>
          </el-form-item>
          <el-form-item label="项目邮编" prop="zipCode">
            <el-input v-model.trim="ruleForm.zipCode" maxlength="20" placeholder="请填写项目邮编"></el-input>
          </el-form-item>
          <el-form-item label="开发商名称">
            <el-input v-model.trim="ruleForm.developerName" maxlength="30" placeholder="请填写开发商名称"></el-input>
          </el-form-item>
          <el-form-item label="建筑面积" prop="area">
            <el-input v-model.trim="ruleForm.area" maxlength="6" placeholder="请填写整型数字"></el-input><span class="single">㎡</span>
          </el-form-item>
          <el-form-item label="占地面积" prop="landArea">
            <el-input v-model.trim="ruleForm.landArea" maxlength="6" placeholder="请填写整型数字"></el-input><span class="single">㎡</span>
          </el-form-item>
          <el-form-item label="规划套数" prop="planRoomNumber">
            <el-input v-model.number.trim="ruleForm.planRoomNumber" maxlength="5" placeholder="请填写整型数字"></el-input><span class="single">个</span>
          </el-form-item>
          <el-form-item label="停车位" prop="parkingSeat">
            <el-input v-model.trim="ruleForm.parkingSeat" maxlength="5" placeholder="请填写整型数字"></el-input><span class="single">个</span>
          </el-form-item>
          <el-form-item label="物业公司名称">
            <el-input v-model.trim="ruleForm.propertyCompanyName" maxlength="30" placeholder="请填写物业公司名称"></el-input>
          </el-form-item>
          <el-form-item label="物业费用">
            <el-input v-model.trim="ruleForm.propertyCosts" maxlength="30" placeholder="例如：14000元/套/年"></el-input>
          </el-form-item>
          <el-form-item label="供暖方式">
            <el-select v-model.trim="ruleForm.heatingSupplyType" placeholder="请选择">
              <el-option v-for="(item,key) in heatingSupplyTypeList" :label="item.dictLabel" :value="item.dictLabel" :key="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="配套设施">
            <el-input type="textarea" maxlength="50" v-model.trim="ruleForm.facilities" placeholder="限50个字"></el-input>
          </el-form-item>
          <el-row>
            <el-form-item label="项目介绍">
              <el-input class="el-textarea400" type="textarea" maxlength="300" v-model.trim="ruleForm.baseInfo" placeholder="限300个字"></el-input>
            </el-form-item>
            <el-form-item label="核心卖点" prop="coreSellPoint">
              <el-input class="el-textarea400" type="textarea" maxlength="300" v-model.trim="ruleForm.coreSellPoint" placeholder="限300个字"></el-input>
            </el-form-item>
          </el-row>

          <h3>位置信息</h3>
          <el-divider></el-divider>
          <el-form-item label="国家-区域" prop="countryName">
            <el-select v-model.trim="ruleForm.countryName" placeholder="请选择国家" @change="selectCountry">
              <el-option v-for="(val,key,index) in countryList" :label="key" :value="key" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="cityName">
            <el-select v-model.trim="ruleForm.cityName" placeholder="请选择区域">
              <template v-for="(val,key) in countryList" :label="key" :value="key">
                <template v-if="key==ruleForm.countryName">
                  <el-option v-for="(item,key) in val" :label="item.cityName" :value="item.cityName" :key="key"></el-option>
                </template>
              </template>
            </el-select>
          </el-form-item>
          <el-row>
           <el-form-item label="项目地址" prop="address">
            <el-input v-model.trim="ruleForm.address" maxlength="30" placeholder="请填写项目地址"></el-input>
            <!-- <el-button @click="getLocation">定位</el-button> -->
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="拾取坐标(经度)" prop="baiduLng">
              <el-input :disabled="true" v-model.trim="ruleForm.baiduLng" placeholder="请拾取坐标"></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="拾取坐标(纬度)" prop="baiduLat">
              <el-input :disabled="true" v-model.trim="ruleForm.baiduLat" placeholder="请拾取坐标"></el-input>
            </el-form-item>
          </el-row>
          <div>
            <div class="map-title">请将点标放到房源所在处，拾取位置坐标</div>
            <baidu-map :center="center" :zoom="zoom" :scroll-wheel-zoom="true" class="map" @click="getPoint">
              <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
              <bm-local-search :keyword="ruleForm.address" :auto-viewport="true" :location="ruleForm.cityName" :panel="false"></bm-local-search>
              <bm-marker :position="{lng: ruleForm.baiduLng, lat: ruleForm.baiduLat}" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
            </baidu-map>
          </div>

          <h3>物业/价格</h3>
          <el-divider></el-divider>
          <el-form-item label="物业类型" prop="propertyType">
            <el-select v-model.trim="ruleForm.propertyType" placeholder="请选择">
              <el-option v-for="(item,key) in propertyTypeList" :label="item.dictLabel" :value="item.dictLabel" :key="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产权年限" prop="propertyRightYears">
            <el-select v-model.trim="ruleForm.propertyRightYears" placeholder="请选择">
              <el-option v-for="(item,key) in propertyRightYearsList" :label="item.dictLabel" :value="item.dictLabel" :key="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="装修标准" prop="decorationType">
            <el-select v-model.trim="ruleForm.decorationType" placeholder="请选择">
              <el-option v-for="(item,key) in decorationTypeList" :label="item.dictLabel" :value="item.dictLabel" :key="key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交房时间" prop="soughtTimeDesc">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择交房日期" v-model.trim="ruleForm.soughtTimeDesc"></el-date-picker>
          </el-form-item>
          <el-form-item label="开盘时间" prop="openingTime">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择开盘日期" v-model.trim="ruleForm.openingTime"></el-date-picker>
          </el-form-item>
          <el-form-item label="售楼处地址" prop="saleLocation">
            <el-input v-model.trim="ruleForm.saleLocation" maxlength="30" placeholder="请填写售楼处地址"></el-input>
          </el-form-item>

          <el-row>
            <el-form-item label="是否有售价" prop="existPrice">
              <el-radio-group v-model.trim="ruleForm.existPrice">
                <el-radio :label="true">有售价</el-radio>
                <el-radio :label="false">售价待定</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>

          <template v-if="ruleForm.existPrice">
            <el-row>
              <el-form-item label="均价">
                <el-col :span="6">
                  <el-form-item prop="minAvgPrice">
                    <el-input v-model.trim="ruleForm.minAvgPrice" maxlength="6" placeholder="最低价"></el-input>
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="1">至</el-col>
                <el-col :span="8">
                  <el-form-item prop="maxAvgPrice">
                    <el-input v-model.trim="ruleForm.maxAvgPrice" maxlength="6" placeholder="最高价"></el-input>
                  </el-form-item>
                  <span>人民币 元/㎡</span>
                </el-col>
                <el-input class="margin-top-20 el-textarea400" type="textarea" maxlength="30" v-model.trim="ruleForm.avgPriceRemark" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="总价" :required="totalPriceIsRequired">
                <el-col :span="6">
                  <el-form-item prop="minTotalPrice2">
                    <el-input v-model.number.trim="ruleForm.minTotalPrice2" maxlength="8" placeholder="最低价"></el-input>
                  </el-form-item>
                </el-col>
                <el-col class="line" :span="1">至</el-col>
                <el-col :span="8">
                  <el-form-item prop="maxTotalPrice2">
                    <el-input v-model.number.trim="ruleForm.maxTotalPrice2" maxlength="8" placeholder="最高价"></el-input>
                  </el-form-item>
                  <span>人民币 万元/套</span>
                </el-col>
                <el-input class="margin-top-20 el-textarea400" type="textarea" v-model.trim="ruleForm.totalPriceRemark" maxlength="30" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-row>
          </template>

          <div v-if="ruleForm.saveType!='edit'">
            <h3>置业顾问</h3>
            <el-divider></el-divider>
            <template v-for="(agent,index) in ruleForm.overSeaAdviserList">
              <el-row class="agent-box">
                <el-form-item label="姓名" :prop="'overSeaAdviserList.' + index + '.realName'" :rules="isDraft ? ruleAgentName2 : ruleAgentName">
                  <el-input v-model.trim="agent.realName" maxlength="10" placeholder="请填写置业顾问姓名"></el-input>
                </el-form-item>
                <el-form-item label="电话号码" :prop="'overSeaAdviserList.' + index + '.tel'" :rules="isDraft ? ruleAgentTel2 : ruleAgentTel">
                  <el-input maxlength="11" v-model.trim="agent.tel" placeholder="请填写置业顾问电话号码"></el-input>
                  <el-button v-if="index==0 && ruleForm.overSeaAdviserList.length<10" @click="addAgent">继续添加</el-button>
                  <span v-if="index==0">若为座机，请携带区号，例如02164728123</span>
                  <el-button v-if="index>0" @click.prevent="removeAgent(agent)">移除</el-button>
                </el-form-item>
              </el-row>
            </template>
          </div>

          <h3>佣金规则</h3>
          <el-divider></el-divider>
          <el-form-item label="佣金规则描述" prop="commissionRule">
            <el-input class="el-textarea400" type="textarea" maxlength="100" v-model.trim="ruleForm.commissionRule" placeholder="至多100个字"></el-input>
          </el-form-item>

          <el-row type="flex"  justify="center">
            <el-button v-if="ruleForm.saveType!='edit'" type="primary" @click="submitForm('ruleForm',true)">提交</el-button>
            <el-button v-else type="primary" @click="submitForm('ruleForm',false)">保存</el-button>
            <!-- <el-button v-if="isNeedDraftBtn && ruleForm.name" class="save-draft" type="primary" @click="saveDraft('ruleForm')">保存<br>草稿</el-button> -->
          </el-row>

        </el-form>
      </div>
    </div>
</template>

<script>

import {
  getRegionList,
  submitForm
} from "@/api/overseasHouse/createOverseasHouse";

export default {
  name: "overseasBaseInfo",
  props: {
    /* 表单数据 */
    ruleForm: {
      type: Object,
      default: {}
    },
    /* 是否需要显示保存草稿按钮 */
    isNeedDraftBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let ruleForm = this.ruleForm;
    const validatePrice = (rule, value, callback) => {
      if (value == ruleForm.minAvgPrice){
        if (ruleForm.minAvgPrice && ruleForm.maxAvgPrice && value > ruleForm.maxAvgPrice) {
          callback(new Error('均价最小金额不能大于最大金额'));
        } else {
          callback()
        }
      }else if(value == ruleForm.maxAvgPrice){
        if (ruleForm.minAvgPrice && ruleForm.maxAvgPrice && value < ruleForm.minAvgPrice) {
          callback(new Error('均价最大金额不能小于最小金额'));
        } else {
          callback()
        }
      }else if (value == ruleForm.minTotalPrice2){
        if (ruleForm.minTotalPrice2 && ruleForm.maxTotalPrice2 && value > ruleForm.maxTotalPrice2) {
          callback(new Error('总价最小金额不能大于最大金额'));
        } else {
          callback()
        }
      }else if(value == ruleForm.maxTotalPrice2){
        if (ruleForm.minTotalPrice2 && ruleForm.maxTotalPrice2 && value < ruleForm.minTotalPrice2) {
          callback(new Error('总价最大金额不能小于最小金额'));
        } else {
          callback()
        }
      }
    }

    return {
      isSave:true,
      countryList:[],//国家城市列表
      heatingSupplyTypeList:[],//供暖方式
      propertyTypeList:[],//物业类型
      propertyRightYearsList:[],//产权期限
      decorationTypeList:[],//装修标准
      center: {lng: 116.401889, lat: 39.917786},
      zoom: 6,
      isDraft:false,
      rules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        area: [
          { required: true, message: '请输入建筑面积', trigger: 'blur' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}
        ],
        landArea: [
          { required: true, message: '请输入占地面积', trigger: 'blur' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}
        ],
        zipCode: [{ required: false,pattern: /^[0-9]*$/, message: '请输入邮政编码'}],
        planRoomNumber: [
          { required: true, message: '请填写规划套数', trigger: 'blur' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}
        ],
        parkingSeat: [{required: false,pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}],
        coreSellPoint: [{ required: true, message: '请输入核心卖点', trigger: 'blur' }],
        countryName: [{ required: true, message: '请选择国家名称', trigger: 'change' }],
        cityName:  [{ required: true, message: '请选择城市名称', trigger: 'change' }],
        address: [{ required: true, message: '请输入项目地址名称', trigger: 'blur' }],
        baiduLat:	[{ required: true, message: '请获取经度', trigger: 'blur' }],
        baiduLng: [{ required: true, message: '请获取维度', trigger: 'blur' }],
        saleLocation: [{ required: true, message: '请输入售楼处地址', trigger: 'blur' }],
        propertyRightYears: [{ required: true, message: '请输入产权年限', trigger: 'change' }],
        decorationType: [{ required: true, message: '请选择装修标准', trigger: 'change' }],
        soughtTimeDesc: [{ required: true, message: '请选择交房时间', trigger: 'change' }],
        openingTime: [{ required: true, message: '请选择开盘时间', trigger: 'change' }],
        propertyType: [{ required: true, message: '请选择物业类型', trigger: 'change' }],
        minAvgPrice: [
          { required: true, validator: validatePrice ,trigger: 'blur'},
          { pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'}
        ],
        maxAvgPrice: [
          { required: true, validator: validatePrice ,trigger: 'blur'},
          { pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'},
        ],
        minTotalPrice2: [
          { required: true, message: '请输入总价最小值', trigger: 'blur'},
          { pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'},
          { validator: validatePrice ,trigger: 'blur'}
        ],
        maxTotalPrice2: [
          { required: true, message: '请输入总价最大值', trigger: 'blur'},
          { pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'},
          { validator: validatePrice,trigger: 'blur'}
        ],
        commissionRule:{ required: true, message: '请输入佣金规则', trigger: 'blur' }
      },
      rules2: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        area: [
          { required: false, message: '请输入建筑面积', trigger: 'blur' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}
        ],
        landArea: [
          { required: false, message: '请输入占地面积', trigger: 'blur' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}
        ],
        zipCode: [{ required: false,pattern: /^[0-9]*$/, message: '请输入邮政编码'}],
        planRoomNumber: [
          { required: false, message: '请填写规划套数', trigger: 'blur' },
          { pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}
        ],
        parkingSeat: [{required: false,pattern: /^\+?[1-9][0-9]*$/, message: '请输入整型数字'}],
        coreSellPoint: [{ required: false, message: '请输入核心卖点', trigger: 'blur' }],
        countryName: [{ required: false, message: '请选择国家名称', trigger: 'change' }],
        cityName:  [{ required: false, message: '请选择城市名称', trigger: 'change' }],
        address: [{ required: false, message: '请输入项目地址名称', trigger: 'blur' }],
        baiduLat:	[{ required: false, message: '请获取经度', trigger: 'blur' }],
        baiduLng: [{ required: false, message: '请获取维度', trigger: 'blur' }],
        saleLocation: [{ required: false, message: '请输入售楼处地址', trigger: 'blur' }],
        propertyRightYears: [{ required: false, message: '请输入产权年限', trigger: 'change' }],
        decorationType: [{ required: false, message: '请选择装修标准', trigger: 'change' }],
        soughtTimeDesc: [{ required: false, message: '请选择交房时间', trigger: 'blur' }],
        openingTime: [{ required: false, message: '请选择开盘时间', trigger: 'blur' }],
        propertyType: [{ required: false, message: '请选择物业类型', trigger: 'change' }],
        minAvgPrice: [
          { required: false, validator: validatePrice ,trigger: 'blur'},
          { pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'}
        ],
        maxAvgPrice: [
          { required: false, validator: validatePrice ,trigger: 'blur'},
          { pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'},
        ],
        minTotalPrice2: [
          { required: false, message: '请输入总价最小值', trigger: 'blur'},
          { pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'},
          { validator: validatePrice ,trigger: 'blur'}
        ],
        maxTotalPrice2: [
          { required: false, message: '请输入总价最大值', trigger: 'blur'},
          { pattern: /^\d+(\.\d+)?$/, message: '请输入正数字'},
          { validator: validatePrice,trigger: 'blur'}
        ],
        commissionRule:{ required: false, message: '请输入佣金规则', trigger: 'blur' }
      },
      ruleAgentName:[{required: true, message: '置业顾问姓名不能为空', trigger: 'blur'}],
      ruleAgentName2:[{required: false}],
      ruleAgentTel:[{required: true, message: '置业顾问电话号码不能为空', trigger: 'blur'},{pattern:  /^((0\d{2,3}\d{7,8})|(1\d{10}))$/, message: '请输入正确的电话号码',trigger: 'blur'}],
      ruleAgentTel2:[{required: false}],
      totalPriceIsRequired:true
    }
  },
  watch: {
    ruleForm: {
      handler(n,o){
        console.log(n,o);
        this.$emit('getIsSave',false);
      },
      deep: true  // 可以深度检测到 person 对象的属性值的变化
    }
  },
  created() {
    this.getRegionList();// 获取城市列表
    this.getSelectData();// 获取select列表数据
  },

  methods: {
    // 获取数据字典
    getSelectData(){
      // 供暖方式
      this.getDicts("op_heating_supply_type").then(response => {
        this.heatingSupplyTypeList = response.data || [];
      });
      // 物业类型
      this.getDicts("op_property_type").then(response => {
        this.propertyTypeList = response.data || [];
      });
      // 产权期限
      this.getDicts("op_property_right_years").then(response => {
        this.propertyRightYearsList = response.data || [];
      });
       // 装修标准
      this.getDicts("op_decoration_type").then(response => {
        this.decorationTypeList = response.data || [];
      });
    },
    // 获取国家城市
    getRegionList(){
      getRegionList({}).then(response => {
        if(response.code==200){
          let countryList = response.data || {};
          this.countryList = countryList;
        }else{
          this.$message("数据获取失败");
        }
      })
    },
    // 选择国家
    selectCountry(){
      this.ruleForm.cityName = '';
    },
    // 点击地图获取坐标
    getPoint(e){    //点击地图获取一些信息，
      // this.show = true;
      this.ruleForm.baiduLng = e.point.lng;     //通过  e.point.lng获取经度
      this.ruleForm.baiduLat = e.point.lat;     //通过  e.point.lat获取纬度
    },
    // 添加置业顾问
    addAgent() {
      this.ruleForm.overSeaAdviserList.push({
        realName: '',
        tel: ''
      });
    },
    // 移除置业顾问
    removeAgent(item) {
      var index = this.ruleForm.overSeaAdviserList.indexOf(item)
      if (index !== -1) {
        this.ruleForm.overSeaAdviserList.splice(index, 1)
      }
    },
    // 提交表单
    submitForm(formName,isCreate){
      this.isDraft = false;
      this.totalPriceIsRequired = true;
      let obj = this.ruleForm;
      if(isCreate){
        obj.status = '1';
      }
      obj.minTotalPrice = parseInt(obj.minTotalPrice2)*10000;
      obj.maxTotalPrice = parseInt(obj.maxTotalPrice2)*10000;
      // 总价最小值存在 最大值可以不填
      if(obj.minTotalPrice2){
        this.rules['maxTotalPrice2'][0].required = false;
      }
      // 总价最大值存在 最小值可以不填
      if(obj.maxTotalPrice2){
        this.rules['minTotalPrice2'][0].required = false;
      }
      // 总价最大值最小值都不存在两个都为必填
      if(!obj.minTotalPrice2 && !obj.maxTotalPrice2){
        this.rules['minTotalPrice2'][0].required = true;
        this.rules['maxTotalPrice2'][0].required = true;
      }
      // 验证
      this.$nextTick(()=>{
        this.$refs[formName].validate((valid) => {
          if (valid) {
            submitForm(obj).then(response => {
              if(response.code==200){
                if(isCreate){
                  this.$alert('新建成功', '提示', {
                  confirmButtonText: '确定',
                    callback: action => {
                      this.$router.push({path:'/overseasHouse/overseasHouseList'});
                    }
                  })
                }else{
                  this.$alert('保存成功');
                  this.$emit('getIsSave',true);
                }
              }else{
                this.$message("数据获取失败");
              }
            })
          } else {
            let text = isCreate ? '新建' : '保存';
            this.$alert(`${text}失败，请根据输入框引导提示，填写所有带*号内容后再提交`, '提示', {
              confirmButtonText: '确定',
              callback: action => {}
            })
            return false;
          }
        });
      })
    },
    // 保存草稿
    saveDraft(formName){
      this.totalPriceIsRequired = false;
      this.isDraft = true;
      let obj = this.ruleForm;
      obj.status = '0';
      obj.minTotalPrice = parseInt(obj.minTotalPrice2)*10000;
      obj.maxTotalPrice = parseInt(obj.maxTotalPrice2)*10000;
      this.$nextTick(()=>{
        this.$refs[formName].validate((valid) => {
          if (valid) {
            submitForm(obj).then(response => {
              if(response.code==200){
                this.$alert('草稿已保存到列表中', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    this.$router.push({path:'/overseasHouse/overseasHouseList'});
                  }
                })
              }else{
                this.$message("数据获取失败");
              }
            })
          } else {
            this.$alert('保存草稿失败，请根据输入框引导提示，填写所有带*号内容后再提交', '提示', {
              confirmButtonText: '确定',
              callback: action => {}
            })
            return false;
          }
        });
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .margin-top-20{
    margin-top:20px;
  }
  .base-info .el-input,.base-info .el-date-editor,.base-info .el-select,.base-info .el-textarea{
    width:200px;
  }
  .base-info .el-textarea400{
     width:400px;
  }
  .map-title{
    margin-left:200px;
    margin-bottom:10px;
  }
  .map {
    margin-left:200px;
    width: 50%;
    height: 400px;
  }
  .single{
    position: absolute;
    right:-20px;
  }
  .save-draft{
    position: fixed;
    top:300px;
    right:50px;
    width:70px;
    height:70px;
    border-radius: 100%;
  }
</style>
